<template>
  <div class="content-box intro-y">
    <hBase :args="args" :lazy="true">
      <template #parts>
        <el-table-column prop="catCode" label="分类编码" width="220"/>
        <!-- <el-table-column prop="catSeqNum" label="分类序号" width="60"/> -->
        <el-table-column prop="catName" label="分类名称" width="240">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.catName"
                placement="top-start"
            >
              <span>{{ scope.row.catName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="catLevel" label="编码级别" width="60"/> -->
        <!-- <wdhState label="是否有效" prop="isEffective" width="60"/> -->
        <el-table-column prop="catDesc" label="分类说明" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.catDesc"
                placement="top-start"
            >
              <span>{{ scope.row.catDesc }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="catStandards" label="相关标准" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.catStandards"
                placement="top-start"
            >
              <span>{{ scope.row.catStandards }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="extSample" label="示例说明" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.extSample"
                placement="top-start"
            >
              <span>{{ scope.row.extSample }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="extRemark" label="备注" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.extRemark"
                placement="top-start"
            >
              <span>{{ scope.row.extRemark }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column/>
      </template>
      <template #edit="{ init, close }">
        <edit :init="init" @close="close"></edit>
      </template>
    </hBase>
  </div>
</template>

<script setup>
import {onMounted, computed} from "vue";
import hBase from "../base/hBase.vue";
import * as $api from "@/api/api.js";
import edit from "./Edit.vue"

const args = computed(() => {
  return {
    search: $api.CategoryQueryTree,
    remove: $api.CategoryDelete,
    hasIndex: false,
    isPaging: false,
    key: (e) => {
      return {
        userKey: localStorage.getItem("userKey"),
        key: e.catCode
      };
    },
  };
});
</script>

<style scoped lang="scss">
:deep().el-table {
  height: 100%;
  .cell {
    height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>